<template>
  <div>
    <div class="pic">
      <img src="	https://cdn7.axureshop.com/demo/2090757/images/%E8%AF%A6%E6%83%85%E9%A1%B5/u343.jpg" alt="">
    </div>
    <p><span>北欧小户型餐厅设计</span></p>
    <p><span>北欧风的流行，就是因为现在越来越崇尚极简的风格，大部分人都不希望自己的家，过于的复杂，就算餐厅也是如此，小编今天分享的就是一些北欧风的餐厅设计，餐桌与餐边柜融为一体，很适合小户型的业主们，一起来看看吧。
      </span> </p>
    <div class="users">
      <div class="avatar">
        <img src="https://img2.baidu.com/it/u=2179862893,3843283184&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="">
        <span>我是用户昵称</span>
      </div>
      <div class="share">
        <van-icon name="share-o" class="fx" @click="showShare = true" />
        <van-icon name="star-o" class="sc" />
        <span>112</span>
      </div>
    </div>
    <van-share-sheet v-model="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {
    return {
      // 分享面板
      showShare: false,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
    }
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },
  },
}
</script>

<style lang="scss" scoped>
.pic {
  width: 375px;
  height: 440px;

  img {
    width: 100%;
  }
}

p {
  font-weight: 600;
  padding: 10px;
  color: #333;

  >span {
    font-size: 18px;
  }
}

p+p {
  padding: 0 10px;

  >span {
    font-size: 14px;
  }
}

.users {
  display: flex;
  margin: 5px 0 30px;

  .avatar {
    width: 50vw;
    padding: 10px 0;
    display: flex;

    img {
      border-radius: 500px;
      width: 25px;
      height: 25px;
      margin: 0 10px;
    }

    span {
      line-height: 25px;
      font-size: 14px;
      ;
    }
  }

  .share {
    width: 50%;
    text-align: end;
    line-height: 45px;
    font-size: 18px;
    padding: 0 10px;
    color: #333;

    .fx {
      margin: 0 30px;
    }

    .sc {
      margin: 0 5px;
    }
  }
}
</style>